let circle = document.querySelector(".circle");
let begin = document.querySelector(".begin");
let reset = document.querySelector(".reset");
let point = document.querySelector(".point");
let time = document.querySelector(".time");
let deg = 0;
let t = 60;
let interval;
begin.addEventListener("click", () => {
  if (!begin.classList.contains("pause")) {
    begin.classList.add("pause");
    interval = setInterval(() => {
      circle.style.background = `conic-gradient(black 0deg ${deg}deg, white ${deg}deg 360deg)`;
      point.style.transform = `rotate(${deg}deg)`;

      let min = Math.floor(t / 60)
        .toString()
        .padStart(2, "0");
      let sec = (t % 60).toString().padStart(2, "0");
      time.textContent = min + ":" + sec;
      deg += 6;
      t--;
      if (deg > 360) {
        clearInterval(interval);
        circle.style.background = `conic-gradient(black 0deg ${0}deg, white ${0}deg 360deg)`;
        point.style.transform = `rotate(${0}deg)`;
        deg = 0;
        t = 60;
        time.textContent = "01:00";
        begin.classList.remove("pause");
      }
    }, 1000);
  } else {
    clearInterval(interval);
    begin.classList.remove("pause");
  }
});

reset.addEventListener("click", () => {
  clearInterval(interval);
  begin.classList.remove("pause");
  circle.style.background = `conic-gradient(black 0deg ${0}deg, white ${0}deg 360deg)`;
  point.style.transform = `rotate(${0}deg)`;
  deg = 0;
  t = 60;
  time.textContent = "01:00";
});
